<template>
    <div class="ui menu massive borderless">
        <div class="item header">{{webName}}</div>
        <template v-for="(nav,index) in navBar">
            <router-link class="item" :key="index" :to="nav.url">{{nav.title}}</router-link>
        </template>

        <a class="ui dropdown item right">
            more
            <i class="dropdown icon"></i>
            <div class="menu" >
                <a class="item" v-for="(m,index) in more" :key="index"  :href="m.url">{{m.title}}</a>
            </div>
        </a>
    </div>
</template>

<script>

    export default {
        name: "Header",
        data() {
            return {
                navBar: [
                    {title: '首页', url: '/'}
                ],
                more: [
                    {title: '关于我们', url: '#'},
                    {title: '后台', url: '#'},
                ],
                webName: 'Travel',

            }
        }
    };


    //********  JQ   **********
    $(function () {
        $('.dropdown')
            .dropdown({
                transition: 'drop'
            });
    })
</script>

<style lang="scss" scoped>

</style>
